<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>getVisibleRectForElement</title>
<style>
    .flag {
        background: yellow;
        opacity: 0.5;
        filter: alpha(opacity = 50);
        position: absolute;
        z-index: 9999;
    }
</style>
</head>
<body>

<h1>按键高亮元素可移动范围</h1>

<h3>
    click document first , then press 1 or 2 or 3 or 4 or 5 or 6
</h3>

<div style="position: relative;
height: 50px;
overflow: auto;">
    <div>
        x<br/>
        x<br/>
    </div>
    <div id="d1" style="height:100px;width: 50px;">
        1 - 50*100
    </div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/>

<div style="width: 50px;height: 100px;" id="d2">
    2 - 50*100
</div>


<br/><br/><br/><br/><br/><br/><br/><br/>

<div style="width: 50px;height: 100px;position: absolute;overflow: hidden">
    <div style="width: 50px;height: 100px;position: relative;" id="d3">
        3 - 50*100
    </div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="width: 50px;height: 100px;overflow: hidden">
    <div style="width: 50px;height: 100px;position: absolute;" id="d4">
        4 - 50*100
    </div>
</div>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="width: 50px;height: 100px;overflow: hidden">
    <div style="height: 150px;"></div>
    <div style="width: 50px;height: 100px;position: absolute;" id="d5">
        5 - 50*100
    </div>
</div>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="width: 50px;height: 100px;overflow: hidden">
    <div style="width: 50px;height: 100px;position: relative;" id="d6">
        6 - 50*100
    </div>
</div>


<script src="/kissy/build/seed.js"></script>
<script src="../../src/uibase/align.js"></script>
<script>

        KISSY.use("component/uibase/align,core", function (S, Align) {

            var Dom = S.DOM,
                    UA = S.UA,
                    Event = S.Event,
                    Node = S.Node;

            var getVisibleRectForElement = Align.__getVisibleRectForElement;

            var map = {}, $ = S.all;

            Event.on(document, 'keydown', function (ev) {
                var index = ev.keyCode - 48;
                if (index > 0 && index < 7) {
                    var id = 'd' + index;
                    var rect = getVisibleRectForElement(Dom.get("#" + id));
                    if (rect) {
                        S.log(rect);
                        var d = map[id];
                        if (!d) {
                            d = map[id] = $("<div class='flag' style='display: none'/>").prependTo("body");
                        }
                        if (d.css("display") == "none") {
                            d.width(rect.right - rect.left);
                            d.height(rect.bottom - rect.top);
                            d.show();
                            d.offset({
                                left:rect.left,
                                top:rect.top
                            });
                        } else {
                            d.hide();
                        }
                    } else {
                        alert("找不到可视区域");
                        document.body.focus();
                    }
                }
            });
        });

</script>
</body>
</html>